<template>
  <div>
    <table-ext :columns="columns" :searchForm="searchForm" :config="config" ref="tableExt">
       <template slot="table-action">
          <el-button type="info" @click="addPurOrg">新增</el-button>
       </template>
    </table-ext>
    <!-- 新增&修改弹框 -->
    <el-dialog :title="dialogUpdate?'修改':'新增' + config.title" :visible.sync="dialogFormVisible">
      <el-form :model="addOrUpdateForm" :rules="rules" ref="addOrUpdateForm" label-width="120px">
        <el-form-item label="采购组织编码" prop="purOrgCode">
          <el-input v-model="addOrUpdateForm.purOrgCode"></el-input>
        </el-form-item>
        <el-form-item label="ERP编码:" prop="purOrgErpCode" style="margin-bottom: 22px">
          <el-input v-model="addOrUpdateForm.purOrgErpCode"></el-input>
        </el-form-item>
        <el-form-item label="采购组织名称:" prop="purOrgName" style="margin-bottom: 22px">
          <el-input v-model="addOrUpdateForm.purOrgName"></el-input>
        </el-form-item>
        <el-form-item label="采购组织类型:" prop="purOrgType">
          <el-select v-model="addOrUpdateForm.purOrgType" placeholder="请选择">
            <el-option v-for="item in purOrgTypes" :key="item.id" :label="item.name" :value="item.id"></el-option>
          </el-select>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="resetForm('addOrUpdateForm'); dialogFormVisible = false">取 消</el-button>
        <el-button @click="resetForm('addOrUpdateForm')" v-if="!dialogUpdate">重置</el-button>
        <el-button type="primary" @click="addOrUpdate('addOrUpdateForm')">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>
<script>
  import TableExt from '@/components/common/table-ext/table-ext.vue';
   export default {
    // 引入自定义表格组件
    components:{
      'table-ext': TableExt
    },
    data() {
      return {
        // 弹框显示控制
        dialogFormVisible: false,
        // 新增|修改弹框控制
        dialogUpdate: false,
        // 弹框属性
        addOrUpdateForm: {
          purOrgCode:'',
          purOrgErpCode: '',
          purOrgName: '',
          purOrgType:''
        },
        // 采购组织类型下拉
        purOrgTypes:[{
          id:1,
          name:'采购组织'
        },{
          id:2,
          name:'适用工厂'
        }],
        // 验证规则
        rules: {
          purOrgCode: [
            { required: true, message: '请输入采购组织编码', trigger: 'blur' }
          ],
          purOrgErpCode: [
            { required: true, message: '请输入ERP编码', trigger: 'blur' },
          ],
          purOrgName: [
            { required: true, message: '请输入采购组织名称', trigger: 'blur' }
          ],
          purOrgType: [
            { required: true, message: '请选择采购组织类型', trigger: 'blur' }
          ]
        },
        config:{ // 页面共通配置
          title: '采购组织', //页面标题
          isPage: true, //是否分页
          isNo: true, //是否显示序号
          selection: true, //是否显示复选框
          crudMapping:{ // CRUD方法
            query:{
              url: this.lib.config.host.masterData +  "/system/purOrgMgt/purOrg/query"
            },
            delete: {
              url: this.lib.config.host.masterData + "/system/purOrgMgt/purOrg/delete/"
            }
          }
        },
        // 查询表单配置
        searchForm:[{
          //显示标签
          label: '采购组织编码:', 
          //数据字段
          key: 'purOrgCode', 
          //标签类型
          type: 'input' 
        },{
          label: 'ERP编码:',
          key: 'purOrgErpCode',
          type: 'input'
        },{
          label: '采购组织名称:',
          key: 'purOrgName',
          type: 'input'
        }],
        // 表格列定义
        columns:[{
          width:'200',
          label: '操作', // 表格header
          align:'center',
          render:(createElement, params)=>{ // 动态渲染，click事件示例
            let _this = this;
            return createElement('div', {}, 
            [createElement('el-button', {
                props: {
                  type: 'text',
                },
                on: {
                  click() {
                    _this.deleteRow(params.row);
                  }
                }
              }, '冻结')
            ]);
          }
        },{
          label: '采购组织类型',
          key: 'purOrgType',
          align: 'center',
          render:(createElement, params)=>{ //动态渲染, 字典表示例
            if(params.row.purOrgType == 1){
               return createElement('div', '采购组织');
            }
            return createElement('div','适用工厂');
          }
        },{
          label: '采购组织编码',
          key: 'purOrgCode',
          align:'center',
        },{
          label: 'ERP编码',
          key: 'purOrgErpCode',
          align:'center',
        },{
          label: '采购组织名称',
          key: 'purOrgName',
          align:'center',
        },{
          label: '最后更新时间',
          key: 'lastModifyTime',
          align:'center',
        }]
      };
    },
    mounted(){ // VUE页面渲染之后调用的方法
      this.initData();
    },
    methods: {
      // 初始化页面数据
       initData(){
        this.getDicData('EXPERT').then((data)=>{ // 获取专家库数据字典信息
          this.evaluationTypeOptions = data;
        });
       },
       // 触发新增|修改
       addOrUpdate(formName) {
        this.$refs[formName].validate((valid) => {
          if (valid) {
             this.axios.post(this.lib.config.host.masterData + "/system/purOrgMgt/purOrg/saveOrUpdate", this.addOrUpdateForm).then((res)=>{
                this.$refs['tableExt'].refreshTable();
                this.dialogFormVisible = false;
            }).catch((e)=>{
              this.$message({
                type: 'info',
                message: '失败！'
              });
            });
          } else {
            return false;
          }
        });
      },
      deleteRow(row) {
        // 冻结SRM采购组织
        this.axios.post(this.lib.config.host.masterData + "/system/purOrgMgt/purOrg/delete/" + row.id)
          .then((response)=>{
            this.refreshTable();
          })
          .catch((error)=>{
            console.log(error);
          });
      },
      // 新增SRM采购组织
      addPurOrg(){
        this.dialogUpdate = false;
        this.dialogFormVisible = true;
        this.$nextTick(()=>{
          this.resetForm('addOrUpdateForm');
        });
      }
    }
  }
</script>